<template>

  <div class="table-header">
    <el-input
        class="search-input"
        placeholder="请输入搜索关键字"
        v-model="searchValue"
        @keyup.enter="search"
    >
      <template #append>
        <el-button :icon="SearchOutlined" @click="search"></el-button>
      </template>
    </el-input>

    <el-button v-if="!notInsert" type="primary" @click="insertFormRef.insertUsersShow()">添加</el-button>
    <template v-if="stock">

      <el-input-number
          class="search-input-stock"
          placeholder="请输入库存量"
          v-model="searchStockValue"
          @keyup.enter="searchFoodNumLt"
          :min="0"
      >
      </el-input-number>
      <el-button type="primary" @click="searchFoodNumLt">查找</el-button>
    </template>

  </div>

  <el-table :data="itemList" stripe style="width: 100%" max-height="400">
    <template v-for="(item,index) in tableInfo" :key="index">
      <el-table-column :prop='item.prop' :label="item.label">
        <template #default="scope">
          <!--     替换值     -->
          {{ item.map ? item.map[scope.row[item.prop]] : scope.row[item.prop] }}

        </template>

      </el-table-column>
    </template>


    <el-table-column label="操作" width="250" v-if="!(notUpdate && notDelete)">
      <template #default="scope">
        <el-button-group>
          <el-button
              v-if="!notUpdate"
              type="primary"
              size="small"
              :icon="EditOutlined"
              @click="updateFormRef.insertUsersShow(scope.row)"
          >编辑
          </el-button
          >
          <el-button
              v-if="!notDelete"
              type="danger"
              size="small"
              :icon="DeleteOutlined"
              @click="deleteReq(scope.row)"
          >删除
          </el-button
          >
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加对话框 -->
  <CommonDialog
      ref="insertFormRef"
      title="添加"
      :tableInfo="insertTableInfo"
      @onTableReq="tableReq"
      @onSubmitReq="insertReq"
  ></CommonDialog>

  <!-- 修改对话框 -->
  <CommonDialog
      ref="updateFormRef"
      title="修改"
      :tableInfo="insertTableInfo"
      @onTableReq="tableReq"
      @onSubmitReq="updateReq"
  ></CommonDialog>
</template>

<script lang="ts" setup>
// @ts-ignore
import {ref, reactive, onBeforeMount} from "vue";
import {
  EditOutlined,
  DeleteOutlined, SearchOutlined,
} from "@ant-design/icons-vue";
// @ts-ignore
import CommonDialog from "./CommonDialog.vue";
import axios from "axios";

const props = defineProps(['tableInfo', 'insertTableInfo', 'notUpdate', 'notDelete', 'notInsert', 'stock']);
const emit = defineEmits(["onInsertReq", "onTableReq", "onDeleteReq", "onUpdateReq"]);


const itemList = ref([])

// 控制插入表单对象
const insertFormRef = ref();

const updateFormRef = ref();


// 搜索关键字
const searchValue = ref("");
const searchStockValue = ref("10");

// 处理data
const takeTable = (item) => {
  for (const itemKey in item) {
    if (item[itemKey] && item[itemKey].toString().indexOf(searchValue.value) !== -1) return true;
  }
  return false;
}
const search = async () => {
  // 读取列表
  await emit("onTableReq", (data) => {
    data = data.filter(takeTable)
    itemList.value = data;
  });

}

const insertReq = async (value) => {
  await emit("onInsertReq", {
    value: value, callback: () => {

      setTimeout(() => {
        tableReq()
      }, 200);

    }
  });
}


const tableReq = () => {
  // 读取列表
  emit("onTableReq", (data) => {
    // console.log(data);
    itemList.value = data;
  });
};

const deleteReq = async (value) => {
  await emit("onDeleteReq", {value: value, callback: tableReq});
}

const updateReq = async (value) => {
  await emit("onUpdateReq", {value: value, callback: tableReq});
}

const searchFoodNumLt = async () => {
  let t = searchStockValue.value;

  if (t === "") t = 10000;

  const {data} = await axios.get(`/api/food/foodNumLt?stock=${t}`)

  if (data.code === 200) {
    itemList.value = data.data.filter(takeTable)
  }
}

// @ts-ignore
onBeforeMount(() => {
  tableReq();
})

</script>

<style scoped>
.search-input {
  width: 300px;
  margin-right: 20px;
}

.search-input-stock {
  width: 200px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>